<template>
  <div class="app-container">
    <el-form
      ref="imageInfoForm"
      :model="imageInfo"
      label-width="120px"
      class="form-container"
      :rules="imageInfoRules"
    >
      <el-form-item label="图片标题" prop="title">
        <el-input v-model="imageInfo.title" />
      </el-form-item>
      <el-form-item label="图片描述" prop="description">
        <el-input v-model="imageInfo.description" />
      </el-form-item>
      <el-form-item label="图片标签" prop="label">
        <el-input v-model="imageInfo.label" />
      </el-form-item>
      <el-form-item label="图片链接" prop="url" hidden>
        <el-input v-model="imageInfo.url" />
      </el-form-item>
      <el-form-item label="重新上传">
        <el-upload
          drag
          :action="uploadUrl"
          multiple
          name="image"
          :on-success="handleUploadSuccess"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitImage">提交</el-button>
        <el-button @click="handleCancelImage">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updateImageById, getImageById } from "@/api/image";
import { imageServUrl } from "@/utils/constants";

export default {
  data() {
    return {
      imageInfo: {
        id: "",
        url: "",
        title: "",
        description: "",
        label: "",
      },
      imageInfoRules: {
        url: [{ required: true, message: "图片链接不能为空", trigger: "blur" }],
        title: [
          { required: true, message: "图片标题不能为空", trigger: "blur" },
        ],
        description: [
          { required: true, message: "图片描述不能为空", trigger: "blur" },
        ],
        label: [
          { required: true, message: "图片标签不能为空", trigger: "blur" },
        ],
      },
      uploadUrl: imageServUrl + "/file/image",
    };
  },
  mounted() {
    const imageId = this.$route.query.imageId;
    if (imageId) {
      getImageById(imageId).then((res) => {
        const _data = res.data;
        this.imageInfo = {
          id: _data.id,
          url: _data.url,
          title: _data.title,
          description: _data.description,
          label: _data.label.join(),
        };
      });
    }
  },
  methods: {
    handleSubmitImage() {
      this.$refs["imageInfoForm"].validate((valid) => {
        if (valid) {
          updateImageById(this.imageInfo).then((res) => {
            this.$notify.success({
              title: "提示",
              message: res.message,
            });
            setTimeout(() => {
              this.$router.push({
                path: "/image/images",
              });
            }, 500);
          });
        } else {
          this.$message.warning({
            message: "请完整填写信息",
            showClose: true,
          });
        }
      });
    },
    handleCancelImage() {
      this.imageInfo = {
        url: "",
        title: "",
        description: "",
        label: "",
      };
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: "图片上传成功",
        });
        this.imageInfo.url = res.data;
      } else {
        this.$notify.error({
          title: "错误",
          message: "图片上传失败",
        });
      }
    },
  },
};
</script>

<style scoped>
.form-container {
  width: 80%;
}
</style>
